<script lang="ts" setup>
import { computed } from 'vue';
import { RouteMap, useRouter } from '@/router';
import {
  convertDateFormat,
  getDefaultAfterDate,
  getDefaultBeforeDate,
  getWeekday
} from '@/utils/date';
import { useLocale } from '@/locale/locale';

const { t } = useLocale();
const router = useRouter();

const props = withDefaults(
  defineProps<{
    activeMode: 1 | 2;
    guestNumber: number;
    startDate: string;
    endDate: string;
    daysNumber: number;
  }>(),
  {
    activeMode: 1,
    guestNumber: 0,
    startDate: getDefaultBeforeDate(),
    endDate: getDefaultAfterDate(getDefaultBeforeDate(), 1),
    daysNumber: 1
  }
);

const startDateWithWeek = computed(() => {
  return `${getWeekday(props.startDate)}, ${convertDateFormat(props.startDate)}`;
});

const endDateWithWeek = computed(() => {
  return `${getWeekday(props.endDate)}, ${convertDateFormat(props.endDate)}`;
});

const formattedInfo = computed(() => {
  return t('HomeSwitcherInfo', { number: props.guestNumber });
});

defineEmits<{
  update: [mode: 1 | 2];
  open: [type: string];
}>();
</script>

<template>
  <view class="home-switcher">
    <view class="home-switcher__head">
      <view class="home-switcher__head-bg"></view>
      <view class="home-switcher__head-content">
        <view
          :class="['home-switcher__head-left', { active: activeMode === 1 }]"
          @click.stop="$emit('update', 1)"
        >
          <view class="text-lg font-medium">{{ t('OrderListHomestay') }}</view>
        </view>
        <image
          :class="{ 'is-right-active': activeMode === 2 }"
          class="home-switcher__head-polyfill"
          src="/static/home_switcher_polyfill.png"
        />
        <view
          :class="{ active: activeMode === 2 }"
          class="home-switcher__head-right"
          @click.stop="$emit('update', 2)"
        >
          <view class="text-lg font-medium">{{ t('HomeShortRent') }}</view>
        </view>
      </view>
    </view>
    <view class="home-switcher__body">
      <view class="home-switcher__top" @click.stop="$emit('open', 'DatePicker')">
        <view class="text-base text-primary font-medium">{{ startDateWithWeek }}</view>
        <view class="home-switcher__count">
          <view class="home-switcher__count-line"></view>
          <view class="home-switcher__count-text">
            {{ t('LHKey_night', { number: daysNumber }) }}
          </view>
          <view class="home-switcher__count-line"></view>
        </view>
        <view class="text-base text-primary font-medium">{{ endDateWithWeek }}</view>
      </view>
      <view class="home-switcher__middle" @click.stop="$emit('open', 'GuestNumberPicker')">
        <text class="text-base text-primary font-normal">
          {{ formattedInfo }}
        </text>
        <image class="w-4 h-4" src="/static/icon_arrow_right.png" />
      </view>
      <view class="home-switcher__btn" @click="router.to(RouteMap.hotels)">
        {{ t('LHKey_searchForBedAndBreakfast') }}
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.home-switcher {
  margin-bottom: 20rpx;

  &__head {
    position: relative;

    &-bg {
      height: 88rpx;
      background-color: rgba(255, 255, 255, 0.7);
      border-radius: 28rpx 28rpx 0 0;
    }

    &-content {
      display: flex;
      justify-content: space-around;
      align-items: center;
      position: absolute;
      bottom: -1rpx;
      left: 0;
      right: 0;
      height: 96rpx;
    }

    &-left,
    &-right {
      display: flex;
      justify-content: center;
      flex: 1;
      height: 88rpx;
      padding-top: 20rpx;
    }

    &-left.active {
      height: 96rpx;
      padding-top: 26rpx;
      background-color: white;
      border-top-left-radius: 28rpx;
      color: #269c74;
    }

    &-right.active {
      height: 96rpx;
      padding-top: 26rpx;
      background-color: white;
      border-top-right-radius: 28rpx;
      color: #269c74;
    }

    &-polyfill {
      width: 77rpx;
      height: 96rpx;

      &.is-right-active {
        transform: scaleX(-1);
      }
    }
  }

  &__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    height: 458rpx;
    padding: 36rpx 0 54rpx;
    border-radius: 0 0 28rpx 28rpx;
    background-color: white;
  }

  &__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 120rpx;
    padding: 40rpx 36rpx 40rpx 40rpx;
  }

  &__count {
    display: flex;
    justify-content: center;
    align-items: center;

    &-line {
      width: 16rpx;
      height: 2rpx;
      background-color: #3d3d3d;
    }

    &-text {
      padding: 4rpx 12rpx;
      border-radius: 16rpx;
      background-color: #3d3d3d;
      font-size: 24rpx;
      line-height: 1;
      color: #fff;
    }
  }

  &__middle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32rpx;
    padding: 40rpx 36rpx 40rpx 40rpx;
  }

  &__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 590rpx;
    height: 96rpx;
    margin: 0 40rpx;
    border-radius: 192rpx;
    background-color: #269c74;
    font-weight: 500;
    font-size: 32rpx;
    line-height: 44rpx;
    color: #fff;
  }
}
</style>
